<!-- 热门景点搜索 -->
<template>

	<view class="content">
		<view class="content-block">
			<view class="block3">
				<view class="dropDownBox">
					<view class="picker-group" @click="showAnew = true">
						<view class="picker">
							综合排序
							<tui-icon name="turningdown" size="16"></tui-icon>
						</view>
					</view>
					<view class="picker-group" @click="showOne = true">
						<view class="picker">
							{{ tabsOne }}
							<!-- 倒三角图标 -->
							<tui-icon name="turningdown" size="16"></tui-icon>
						</view>
					</view>

					<view class="picker-group" @click="showThree = true">
						<view class="picker">
							{{ tabsThree }}
							<tui-icon name="turningdown" size="16"></tui-icon>
						</view>
					</view>
					<view class="picker-group" @click="showTwo = true">
						<view class="picker">
							{{ tabsTwo }}
							<tui-icon name="turningdown" size="16"></tui-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="block2">
				<view v-for="(item,index) in popularSite" :key="index" class="">
					<view class="reportList">
						<view class="cardItem">
							<view class="topView">
								<image :src="item.themeImg" mode=""></image>
								<view class="rightView">
									<view class="title">
										{{ item.name }}
									</view>
									<view class="scoreAsReport">
										<view class="score">
											任务成绩: {{ item.score }}分
										</view>
										<view class="selectReport" @click="viewClick(item)">
											查看报告
										</view>
									</view>
								</view>
							</view>
							<view class="bottomView">
								<view class="bottomItem">
									游玩景点:{{ item.scenicCount }} |
								</view>
								<view class="bottomItem">
									完成任务:{{ item.taskCount }} |
								</view>
								<view class="bottomItem">
									旅行时长:{{ item.planTime }} |
								</view>
								<view class="bottomItem">
									全程:{{ Math.ceil(item.distance / 100) / 10 }}km
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="block5">
				<view v-if="popularSite.length < total" class="">
					<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
				</view>

				<view v-else class="noMore">
					<tui-nomore backgroundColor="#F2F2F2" text="到底了 "></tui-nomore>
				</view>
			</view>
		</view>
		<!-- 综合排序 -->
		<u-picker ref="uPickerAnew" :columns="columnsAnew" :show="showAnew" @cancel="showAnew = false"
			@confirm="confirmAnew">
		</u-picker>
		<!-- 地区 -->
		<u-picker ref="uPickerOne" :columns="columns" :show="showOne" @cancel="showOne = false" @change="changeHandler"
			@confirm="confirmOne">
		</u-picker>
		<!-- 风景类型 -->
		<u-picker ref="uPickerThree" :columns="columnslandscapeName" :show="showThree" @cancel="showThree = false"
			@change="changeLandscape" @confirm="confirmThree">
		</u-picker>
		<!-- 类别 -->
		<u-picker ref="uPickerTwo" :columns="columnsTypeName" :show="showTwo" @cancel="showTwo = false"
			@confirm="confirmTwo">
		</u-picker>
	</view>
</template>

<script>
	import luxian from '@/components/diy/luxian';
	import {
		popular_destination,
		Popular_route,
		findRegions,
		findDictTree,
		scenicPage,
		lineReport,
		judgeApperception
	} from "@/api/challenge";
	// data 数据 及 方法
	export default {
		components: {
			luxian
		},
		data() {
			return {
				listData: [],
				showOne: false,
				showTwo: false,
				showThree: false,
				showAnew: false,
				tabsOne: "景点地区",
				tabsTwo: "路线类型",
				tabsThree: "路线风格",
				timer: null,
				activeId: 1,
				areaOnePid: [""],
				areaTwoPid: [],
				areaThreePid: [],
				columns: [
					["全部"],
				],
				columnsAnew: [
					['综合排序']
				],
				columnOneData: [],
				columnTwoData: [],
				columnsTypeName: [
					["全部", '跟团游', "拼团游", "研学", "亲子团游", "自助亲朋"]
				],
				columnsTypeId: ["", 1, 2, 3, 4, 5],
				columnslandscapeName: [
					["全部"],
				],
				columnslandscapeOneName: [
					[]
				],
				columnslandscapeOneId: [
					[]
				],
				name: '',
				dropdownShow: true,
				objData: {
					pageNumber: 1,
					pageSize: 10,
					tel: uni.getStorageSync("userinfo").phone,
					dictId: "",
					locationId: "",
					lineType: ''
				},
				popularSite: [],
				total: 0,
				listData: [],
				sortIndex: 0, // 默认排序选择
				areaIndex: 0, // 默认地区选择
				typeIndex: 0, // 默认类型选择
			}
		},
		onLoad() {
			this.popularDestination()
			findRegions({
				pid: 0
			}).then(res => {
				res.forEach(item => {
					this.columns[0].push(item.name)
					this.areaOnePid.push(item.id)
				})
			})
			findDictTree({
				rootName: '景点类别'
			}).then(res => {
				console.log('景点', res);
				res.forEach((item, index) => {
					this.columnslandscapeName[0].push(item.name)
					this.columnslandscapeOneName.push([])
					this.columnslandscapeOneId.push([])
					item.children.forEach(params => {
						this.columnslandscapeOneName[index + 1].push(params.name)
						this.columnslandscapeOneId[index + 1].push(params.id)
					})
				})
			})

		},
		onReachBottom() {
			this.objData.pageNumber += 1
			this.popularDestination()
		},
		methods: {
			loadmore() {
				this.objData.pageNumber += 1
				this.popularDestination()
			},
			viewClick(data) {
				judgeApperception({
					partyId: data.partyId
				}).then(res => {
					if (res == true) {
						uni.navigateTo({
							url: '/pages/tourplan/travelReport/travelReport?itineraryId=' + data
								.itineraryId +
								'&partyId=' + data.partyId + '&groupId=' + data.groupId +
								'&returnType=1&deltaNumber=1'
						})
					} else {
						uni.navigateTo({
							url: '/pages/challenge/tripPerception?itineraryId=' + data
								.itineraryId + '&partyId=' + data.partyId + '&groupId=' + data.groupId +
								'&returnType=1&deltaNumber=1'
						})

					}
				})
			},
			confirmAnew() {
				this.objData.dictId = ""
				this.objData.locationId = ""
				this.objData.lineType = ""
				this.tabsOne = '景点地区'
				this.tabsTwo = '路线类型'
				this.tabsThree = '路线风格'
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showAnew = false
			},
			bindSortPickerChange(e) {
				this.sortIndex = e.detail.value;
			},
			bindAreaPickerChange(e) {
				this.areaIndex = e.detail.value;
			},
			bindTypePickerChange(e) {
				this.typeIndex = e.detail.value;
			},
			popularDestination() {
				var data = {}
				for (let key in this.objData) {
					if (this.objData[key] != '') {
						data[key] = this.objData[key]
					}
				}
				lineReport(data).then(res => {
					if (this.objData.pageNumber > 1) {
						res.records.forEach(item => {
							this.popularSite.push(item)
						})
						this.total = res.total
					} else {
						this.popularSite = res.records;
						this.total = res.total
					}
				})
			},
			searchEvent() {
				this.objData.pageNumber = 1
				this.popularDestination()
			},

			AttractionsEvent(data) {
				uni.navigateTo({
					url: '/pages/home/AttractionsDetails?id=' + data
				})
			},

			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPickerOne
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					if (index == 0) {
						console.log('全部', index);
						this.columnOneData = [],
							this.columnTwoData = [],
							picker.setColumnValues(1, [])
						picker.setColumnValues(2, [])
					} else {
						this.columnOneData = []
						this.areaTwoPid = []
						this.columnTwoData = []
						this.areaThreePid = []
						findRegions({
							pid: this.areaOnePid[index]
						}).then(res => {
							res.forEach(item => {
								this.columnOneData.push(item.name)
								this.areaTwoPid.push(item.id)
							})
							findRegions({
								pid: res[0].id
							}).then(params => {
								params.forEach(item => {
									this.columnTwoData.push(item.name)
									this.areaThreePid.push(item.id)
								})
							})
							// picker为选择器this实例，变化第二列对应的选项
							picker.setColumnValues(2, this.columnTwoData)
						})
						// picker为选择器this实例，变化第二列对应的选项
						picker.setColumnValues(1, this.columnOneData)
					}


				}
				if (columnIndex === 1) {

					this.columnTwoData = []
					this.areaThreePid = []
					console.log('222', index);
					findRegions({
						pid: this.areaTwoPid[index]
					}).then(res => {
						res.forEach(item => {
							this.columnTwoData.push(item.name)
							this.areaThreePid.push(item.id)
						})
					})
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, this.columnTwoData)

				}
			},
			changeLandscape(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPickerThree
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columnslandscapeOneName[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirmOne(e) {
				console.log(e);
				if (e.indexs[0] == 0) {
					this.objData.locationId = ""
					this.tabsOne = "全部"
				} else {
					this.objData.locationId = this.areaThreePid[e.indexs[2]]
					this.tabsOne = e.value[2]
				}
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showOne = false
			},
			confirmTwo(e) {
				this.objData.lineType = this.columnsTypeId[e.indexs[0]]
				this.tabsTwo = e.value[0]
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showTwo = false
			},
			confirmThree(e) {
				console.log(e);
				if (e.value[0] == "全部") {
					this.objData.dictId = ""
					this.tabsThree = "全部"
				} else {
					this.objData.dictId = this.columnslandscapeOneId[e.indexs[0]][e.indexs[1]]
					this.tabsThree = e.value[1]
				}
				this.objData.pageNumber = 1
				this.popularDestination()
				this.showThree = false
			},
			seleckEvent(data) {
				this.activeId = data
				if (data == 1) {
					this.showOne = true
				} else if (data == 2) {
					this.showTwo = true
				} else if (data == 3) {
					this.showThree = true
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC, PingFang SC-Regular;
		height: 100vh;
		background-color: #F2F2F2;
	}

	.block1 {
		width: 100%;

		background-color: #fff;
	}

	.block2 {
		margin-top: 20rpx;
		background-color: #F2F2F2;

	}

	.noMore {
		background-color: #F2F2F2;
		width: 100%;
		height: 250rpx;
	}

	.dropDownBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;

		.picker-group {
			.picker {
				font-size: 28rpx;
			}
		}
	}

	.picker-group-row {
		display: flex;
		align-items: center;
	}

	.picker-item {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.content-block {
		background-color: #F2F2F2;
	}

	.blocok5 {
		justify-content: center;
	}

	.block5 {
		display: flex;
		/* 使用Flexbox布局 */
		flex-direction: column;
		/* 设置为垂直方向 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 400rpx;
		/* 确保有足够的高度，根据需要调整高度 */
		background-color: #F2F2F2;
	}

	.noMore {
		text-align: center;
	}

	.search {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #f2f2f2;
		padding: 20rpx 30rpx;


	}

	.reportList {
		display: flex;
		flex-direction: column;
		align-items: center;
		// padding-bottom: 30rpx;
		width: 100%;
		min-height: 300rpx;

		.cardItem {
			margin-top: 30rpx;
			width: 90%;
			height: 266rpx;
			background-color: white;
			border-radius: 12rpx;

			.topView {
				display: flex;
				padding: 20rpx 20rpx;
				height: 154rpx;
				border-bottom: 2px solid #EEEEEE;


				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 10rpx;
				}

				.rightView {
					flex: 1;
					margin-left: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Heavy;
						font-weight: 800;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.scoreAsReport {
						display: flex;
						align-items: center;
						margin-top: 15rpx;

						.score {
							flex: 1;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #4186f5;
						}

						.selectReport {
							width: 160rpx;
							height: 52rpx;
							background: #4186f5;
							border-radius: 12rpx;
							color: white;
							text-align: center;
							line-height: 52rpx;
							font-size: 28rpx;
						}
					}
				}
			}

			.bottomView {
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				height: 66rpx;

				.bottomItem {
					margin-left: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #757575;
				}
			}
		}
	}
</style>